import { CGraphEntity } from 'stores/editorModels';

/************************************************************
*           views-property 数据结构定义
************************************************************/
// 根据组件类型，找到对应的类别，在topoProperty中使用
const tuppleMaps = {
  text: 'tuple-text',
  line: 'tuple-line',
  rect: 'tuple-shape',
  circle: 'tuple-shape',
  triangle: 'tuple-shape',
  curve: 'tuple-line',
  image: 'tuple-image',
  'line-arrow': 'tuple-line', // ’-‘进行驼峰转换

  'svg-img': 'tuple-media',
  video: 'tuple-media',
  audio: 'tuple-media',
  animation: 'tuple-animation',

  'chart-line': 'tuple-chart-line',
  'chart-curve': 'tuple-chart-line',
  'chart-bar': 'tuple-chart-line',
  'chart-scatter': 'tuple-chart-line',
  'chart-pie': 'tuple-chart-pie',
  'chart-arc': 'tuple-chart-pie',
  'chart-gauge': 'tuple-chart-gauge',
  'chart-simple-gauge': 'tuple-chart-gauge',
  'chart-map': 'tuple-chart-map',

  'form-input': 'tuple-form-input',
  'form-button': 'tuple-form-button',
  'form-circular-progress': 'tuple-form-circle-progress',
  'form-linear-progress': 'tuple-form-linear-progress',
  'form-toggle': 'tuple-form-status',
  'form-toggle-button': 'tuple-form-switch-status',
  'form-circular-button': 'tuple-form-switch',

  'form-grid': 'tuple-form-grid',
  'form-large-grid': 'tuple-form-grid'
};

//优先匹配map，否则将自动匹配
export  function parseTupleName (component: CGraphEntity) {
  let tupleName :string = '';
  if (Object.prototype.hasOwnProperty.call(tuppleMaps, component.comValue) === false) {
    console.log(component.comValue);
    console.info(
      `没有手动配置组件映射，将根据数据的type自动匹配，当前组件类型=${component.comValue}`
    );
    tupleName = 'tuple-' + component.comValue;
  } else {
    // keyof typeof
    tupleName = tuppleMaps[component.comValue as keyof typeof tuppleMaps];
  }
  return tupleName;
}

